<template>
	<view class="proDetail">
		<view class="header">
			<image class="image_header" :src="data.thumb" mode=""></image>
			<view class="h_title">企服产品详情</view>
		</view>
		<!-- <view class="fanhui" @click="back"></view> --> 
		<view class="info">
			<view class="title">{{data.name}}</view>
			<view class="info_i">产品价格： <text class="big">{{data.price==0?'免费':data.price}}</text></view>
			<view class="info_i">所属机构： <text class="small" @click="toCom(item.identification)">{{data.company_name}}</text></view>
			<view class="info_i">产品类型： <text class="small">{{data.type_name}}</text></view>
			<view class="info_i">联系方式： <text class="small">{{data.contact + ' - ' +data.tel}}</text></view>
			<!-- <view class="flex">
				<view class="" @click="toMap"><image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/add.png" mode="widthFix"></image>{{data.address}} <text class="dh"> 导航</text> </view>
			</view> -->
		</view> 
		<video  :autoplay="true" class="video" :src='data.video' v-if="data.video"></video>
		<view class="" style="padding: 10px 14px;">
			<rich-text class="desc_t" :nodes="data.content"></rich-text>
		</view>
		<bottomDetail :data='data' type='16' :id='id' btnName='咨询'></bottomDetail>
	</view>
</template>

<script>
	import { jinrong,gz,ShareAdd,hbApi,CreateQrcode,GetUseInfo} from '../../utils/api.js'
	import bottomDetail from '@/components/bottomDetail.vue'
	export default {
		data() {
			return {
				isSc:false,
				data:{},
				plList:[],
				page:1,
				id:'',
				bottom_iphone:uni.getStorageSync('bottom')||false,
				total:0,
				user_id:'',
				userinfo:{},
			}
		},
		components:{bottomDetail},
		onShareAppMessage() {
			console.log(JSON.parse(uni.getStorageSync('userinfo')).user_id)
			ShareAdd({identification:this.data.id,type:2,name:this.data.name})
			return {
				title: this.data.name+' | '+ this.data.city_name,
				path:'/pages/proDetail/proDetail?id=' + this.id + (this.data.isMy==1?'&user_id=' + JSON.parse(uni.getStorageSync('userinfo')).user_id:'')
			}
		},
		onLoad(option){
			if(option.scene){
				this.id= option.scene
			}else{
				this.id= option.id
			}
			uni.showLoading({ mask:true,
				title:'加载中'
			})
			
			jinrong.getServiceProductDetail({id:this.id}).then(res=>{
				uni.hideLoading()
				this.data = res.data
			}).catch(err=>{
				uni.hideLoading()
				this.$message.warning(err)
			})
		},
		onReachBottom() {
			// 加锁，避免在加载更多时用户频繁下拉导致的重复触发而渲染异常
			if(!this.isNewRenderDone) return;   
			this.isNewRenderDone = false
			this.page+=1
			this.getPlList()
		},
		onShow(){
			// let time = setInterval(()=>{
			// 	if(this.id){
			// 		this.page=1
			// 		this.getPlList()
			// 		clearInterval(time)
			// 	}
			// },100)
		},
		methods: {
			call(){
				uni.makePhoneCall({
					phoneNumber: this.data.tel, 
				})
			},
			closeU(){
				this.user_id=''
			},
			open(){
				this.$refs.open.show()
			},
			pl(){
				this.$refs.pl.show()
			},
			changeSc(){
				if(! JSON.parse(uni.getStorageSync('userinfo')).nickname ){
					uni.showModal({
						title:'提示',
						content:'需完成登录授权后方能收藏',
						success: (res) => {
							uni.switchTab({
								url:'/pages/my/my'
							})
						},
					})
					return
				}
				gz.AttendAddOrCancel({identification:this.data.id,type:2,name:this.data.name}).then(res=>{
					if(res.status==1){
						this.isSc=!this.isSc
					}
				})
			},
			phone(){
				uni.makePhoneCall({
						phoneNumber: this.data.tel,
				});
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style scoped lang="scss">

	.video{
		width: 100%;
		margin: 10px 0;
	}
.zaiti {
	height: 100%;
	width: 100%;
}
.header{
	width: 100%;
	height: 142px;
	position: relative;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.67) 100%);
	.image_header{
		width: 100%;
		height: 260px !important;
		position: relative;
		z-index: 1;
	}
	.h_title{
		width: 80px;
		height: 16px;
		font-size: 16px;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 16px;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 80rpx;
	}
}
.info{
	margin: 0 16px;
	padding: 16px;
	width: calc(100% - 64px);
	// height: 200px;
	background: #FFFFFF;
	box-shadow: 0px 1px 10px 0px rgba(71, 88, 191, 0.12);
	border-radius: 6px;
	position: relative;
	z-index: 10;
}
.title{
	width: 307px;
	// height: 50px;
	font-size: 18px;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #222222;
	margin-bottom: 10px;
	// line-height: 25px;
}
.flex{
		display: flex;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		justify-content: space-between;
		margin: 10px 0 10px;
		color: #999999;
		line-height: 20px;
		.dh{
			display: inline-block;
			margin-left: 8px;
			color: #279aff;
			
		}
		view{
				display: flex;
				align-items: center;
		}
		image{
			width: 13px;
			margin-right: 4px;
		}
}
.info_i{
	display: flex;
	font-size: 14px;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #333333;
	line-height: 20px;
	margin-top: 10px;
	.big{
		font-size: 22px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #279aff;
		line-height: 30px;
		margin-top: -8px;
	}
	.small{
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 20px;
	}
}
.img{
	margin: 16px;
	width: calc(100% - 32px);
}
.desc_t{
	margin-left: 16px;
	font-size: 14px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #666666;
	line-height: 21px;
}
	.chain_view{
		background-color: #d7e7ffcc;
		color: #3D7CE2;
		padding: 2px 5px;
		height: 16px;
		line-height: 16px;
		border-radius: 2px;
		font-size: 12px;
		margin: 8px 5px 4px 0;
		display: inline-block;
	}
.bottom{
	position: fixed;
	justify-content: space-around;
	align-items: center;
	bottom: 0;
	width: 100% ;
	// padding: 0 10px;
	height: 54px;
	background: #FFFFFF;
	display: flex;
	z-index: 100;
	box-shadow: 0px -2px 2px #e7e7e7;
	.btn{
		font-size: 18px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		height: 54px;
		line-height: 54px;
		background: linear-gradient(90deg, #FE8E33 0%, #FC5517 100%);
		// border-radius: 23px;
		width: 180px;
	}
	.sc{
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		text-align: center;	
		// width: ;
		position: relative;
		image{
			width: 24px;
			height: 24px;
		}
		.num{
			position: absolute;
			font-size: 12px;
			background-color: red;
			height: 14px;
			line-height: 14px;
			border-radius: 7px;
			padding: 0 4px;
			color: #fff;
			right: -5px;
			top: -5px;
		}
	}
}
.pl_item{
	display: flex;
	margin: 10px 16px;
	width: calc(100% - 32px);
	.tx{
		width: 24px;
		height: 24px;
		margin-right: 10px;
	}
	.r{
		width: calc(100% - 34px);
		padding-bottom:10px;
		border-bottom: 1px solid #E9EBEE;
		.top{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;
			.name{
				font-size: 14px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #507DAF;
			}
			.time{
				font-size: 14px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}
		.content{
			padding-top:10px;
			font-size: 16px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
	}
}
.title_pj{
	font-size: 18px;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #333333;
	line-height: 25px;
	margin: 16px;
	width: calc(100% - 32px);
	display: flex;
	justify-content: space-between;
	.right{
		display: flex;
		align-items: center;
			image{ 
				width: 15px;
				margin-right: 5px;
			}
			font-size: 14px;
			font-weight: 400;
			color: #FF5100;
	}
}
.userinfo{
	position:fixed;
	bottom:0;
	z-index:1000;
	display:flex;
	align-items:center;
	background:#ff9933;
	color: #fff;
	padding:15px 20px;
	width:calc(100% - 40px);
	box-shadow: 0 -2px 2px 0 rgba(0,0,0,0.2);
	.img111{
		width:42px;
		height:42px;
		border-radius:21px;
		margin-right:20px;
	}
	.btn{
		position:absolute;
		right:30px;
		border-radius:4px;
		padding:4px 8px;
		background:#fff;
		color:#ff9933;
	}
	.img1{
		position:absolute;
		right:0;
		top:-5px;
		height:18px;
		width:18px;
	}
}
	.chain_view{
		background-color: #ECF3FF;
		color: #3D7CE2;
		padding: 0 4px;
		height: 16px;
		line-height: 16px;
		border-radius: 2px;
		font-size: 12px;
		margin: 8px 5px 0 0;
		display: inline-block;
	}
</style>